<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
</head>
<body style="padding: 10px">
<form class="layui-form layui-form-pane" action="">
    <div class="layui-inline">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input id="input1" type="text" name="username" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input id="input2" type="text" name="tel" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <button id="searchBtn" type="button" class="layui-btn"><i class="layui-icon layui-icon-search"></i>查询</button>
    </div>
</form>
<script id="toolbar1" type="text/html">
    <button type="button" lay-event="add" class="layui-btn layui-btn-sm layui-btn-normal"><i
            class="layui-icon layui-icon-add-1"></i>新增
    </button>
    <button type="button" lay-event="del" class="layui-btn layui-btn-sm layui-bg-red"><i
            class="layui-icon layui-icon-delete"></i>删除
    </button>
</script>
<script id="toolbar2" type="text/html">
    <button type="button" lay-event="role" class="layui-btn layui-btn-xs layui-btn-normal">角色</button>
    <button type="button" lay-event="edit" class="layui-btn layui-btn-xs layui-btn-normal">编辑</button>
    <button type="button" lay-event="del" class="layui-btn layui-btn-xs layui-bg-red">删除</button>
</script>
<script id="toolbar3" type="text/html">
    <form class="layui-form layui-form-pane" lay-filter="form1" style="padding: 10px 40px" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="id"/>
                    <input type="text" name="username" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" placeholder="请输入" lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="email" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" pane>
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked>
                <input type="radio" name="sex" value="女" title="女">
                <input type="radio" name="sex" value="保密" title="保密">
            </div>
        </div>

        <div class="layui-form-item">
            <button id="saveBtn" type="button" class="layui-btn" lay-submit lay-filter="demo2">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</script>
<table class="layui-table" id="ID-table-demo-init"></table>
<script src="/plugins/layui/layui.js"></script>
<script>
    layui.use(['table', 'layer', 'form'], function () {
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;

        //给查询按钮绑定事件
        $("#searchBtn").on("click", function () {
            table.render({
                id: "table1",
                elem: "#ID-table-demo-init",
                cols: [[
                    {type: "checkbox"},
                    {title: "用户名", field: "username", align: "center"},
                    {title: "姓名", field: "name", align: "center"},
                    {title: "性别", field: "sex", align: "center"},
                    {title: "电话", field: "tel", align: "center"},
                    {title: "操作", align: "center", templet: "#toolbar2"}
                ]],
                url: "/user",
                toolbar: "#toolbar1",
                page: true,
                where: {o: "select", username: $("#input1").val(), tel: $("#input2").val()}
            });
        }).click();

        //绑定表格事件
        table.on("tool", function (obj) {
            if (obj.event === "edit") {
                //请求获取所有信息
                $.get("/user", {o: "info", uid: obj.data.id}, function (u) {
                    //获取成功后再弹出窗口，并回显数据
                    layer.open({
                        title: "编辑用户",
                        area: ["450px", "500px"],
                        type: 1,
                        content: $("#toolbar3").html()
                    });
                    form.val("form1", u);
                    //给保存按钮绑定事件
                    $("#saveBtn").on("click", function () {
                        //1.收集表单中录入的所有数据
                        let data = form.val("form1");
                        data.o = "save";
                        //2.发请求，把数据传给servlet
                        $.post("/user", data, function () {
                            //3.请求成功之后
                            layer.closeAll();
                            $("#searchBtn").click();
                        });
                    });
                });

            }
            if (obj.event === "del") {
                layer.confirm("您确定要删除这个用户吗？", function () {
                    $.post("/user", {o: "delete", uid: obj.data.id}, function () {
                        //1.关闭提示窗口
                        layer.closeAll();
                        //2.重新渲染表格
                        $("#searchBtn").click();
                    });
                });
            }
            if (obj.event === "role") {
                //获取所有角色的数据
                $.get("/role?o=all&uid="+obj.data.id, function (roles) {
                    layer.open({
                        title: "绑定角色",
                        area: ["300px", "300px"],
                        type: 1,
                        content: "<div id='roleDiv' class='layui-form' style='padding:20px'><input type='hidden' id='uid'/></div>"
                    });
                    //遍历角色数据展示在页面上
                    $.each(roles, function (index, item) {
                        $("#roleDiv").append("<input type='checkbox' "+(item.checked?"checked":"")+" value='"+item.id+"' title='" + item.name + "'>");
                    });
                    form.render();
                    $("#uid").val(obj.data.id);
                });
            }
        });

        //复选框事件
        form.on("checkbox", function (obj2) {
            let checked = obj2.elem.checked;
            let value = obj2.value;
            console.log(checked + "----" + value);
            //发请求通知后台　绑定或取消角色
            $.post("/user",{o:"role",type:checked?"add":"del",rid:value,uid:$("#uid").val()},function(){
                layer.msg(checked?"绑定成功":"取消成功");
            });
        });

        //给表格头部工具绑定事件
        table.on("toolbar", function (obj) {
            if (obj.event === "add") {
                layer.open({
                    title: "新增用户",
                    area: ["450px", "500px"],
                    type: 1,
                    content: $("#toolbar3").html()
                });
                form.render();
                //给保存按钮绑定事件
                $("#saveBtn").on("click", function () {
                    //1.收集表单中录入的所有数据
                    let data = form.val("form1");
                    data.o = "save";
                    //2.发请求，把数据传给servlet
                    $.post("/user", data, function () {
                        //3.请求成功之后
                        layer.closeAll();
                        $("#searchBtn").click();
                    });
                });
            }

            if (obj.event === "del") {//批量删除
                //1.获取选中的行
                let status = table.checkStatus("table1");
                //console.log(status);
                if (status.data.length === 0) {
                    layer.msg("删除时请至少选中一行！");
                    return;
                }
                let ids = "";//要删除的用户的所有ID，逗号隔开
                $.each(status.data, function (index, item) {
                    if (ids != "") {
                        ids += ",";
                    }
                    ids += item.id;
                });
                console.log(ids)
                $.post("/user", {o: "delete", uid: ids}, function () {
                    layer.closeAll();
                    $("#searchBtn").click();
                });
            }
        });
    });
</script>
</body>
</html>